<template>
        <div id="sorts-view" class="sorts-view">
            <div id="sorts-view-slipe" class="sorts-view-slipe" @touchstart="sortItemsDown" @touchmove="sortItemsMove"
            @touchend="sortItemsUp" :style="'margin-top:' +slipeTop +'px'">
                <div class="sorts-items" v-for="items in sortsList">
                    <p>{{items.title}}</p>
                    <div class="sorts-items-box">
                        <router-link class="sorts-item" v-for="item in items.sortList" to="/goodslist/phone">
                            <img :src="item.imgUrl" alt="">
                            <span>{{item.title}}</span>
                        </router-link>
                        <div class="clear-both"></div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
    export default {
        data() {
            return {
                sortsList : {},
                move: {
                    newDot: 0,
                    oldDot: 0
                },
                slipeTop: 0,
                sortItemsSubHeight: 0,
                oldTargetId: null,
            }
        },
        created() {
            this.getSortItems(this.sortsId);
        },
        updated(){
            this.getSortItems(this.sortsId);
        },
        methods: {
            getSortItems(id){
                id = id%3;
                if(id === 0){
                    id = 1;
                }
                this.$http.get('/sort/getSorts/' +id).then(data => {
                    this.sortsList = data.body;
                }).catch(data => {

                });
            },
            sortItemsDown(e) {
                if (this.sortItemsSubHeight === 0) {
                    var slipeHeight = document.getElementById('sorts-view-slipe').clientHeight;
                    var sortItemsHeight = document.getElementById('sorts-view').clientHeight;
                    this.sortItemsSubHeight = slipeHeight - sortItemsHeight;
                }
                this.move.oldDot = e.touches[0].pageY;
            },
            sortItemsMove(e) {
                if (this.move.newDot === 0) {
                    this.move.newDot = e.touches[0].pageY;
                }
                if (this.slipeTop <= 50 && this.slipeTop >= -(this.sortItemsSubHeight + 50)) {
                    this.slipeTop = this.slipeTop + (e.touches[0].pageY - this.move.newDot);
                    this.move.newDot = e.touches[0].pageY;
                }
            },
            sortItemsUp(e) {
                if (this.slipeTop >= 0) {
                    this.slipeTop = 0;
                } else if (this.slipeTop <= -this.sortItemsSubHeight) {
                    this.slipeTop = -this.sortItemsSubHeight;
                }

                if (Math.abs(this.move.newDot - this.move.oldDot) <= 40) {
                    this.selectSoet(e);
                }

                this.move.newDot = 0;
            }
        },
        components: {
        },
        props: ['sortsId']
    }
</script>

<style lang="scss" scoped>
.sorts-view {
        height: 548px;
        width: 70%;
        background: #ffffff;
        overflow: hidden;

        .sorts-items {
            width: 100%;
            margin-bottom: 10px;
            

            p {
                color: #000000;
                font-size: 17px;
                margin: 0;
                padding: 10px;
                font-weight: bold;
            }

            .sorts-items-box {
                width: 100%;
            }

            .sorts-item {
                width: 33%;
                text-align: center;
                padding: 10px;
                box-sizing: border-box;
                float: left;

                img {
                    width: 100%;
                }
            }
        }
    }


    .clear-both::after {
        display: block;
        content: "";
        height: 0;
        width: 0;
        clear: both;
    }
</style>